@import '../../../../../app/mixins.css';

.container {
  display: flex;
  padding: 10px 20px;

  & > section {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  & .label {
    @mixin contentLarge;

    color: var(--color-slate-gray);
  }

  & .footerContent {
    @mixin contentSmall;

    color: var(--color-slate-gray);
    display: block;
    margin-top: 12px;
    transition: opacity var(--animation-speed-fast) linear;

    &.hide {
      opacity: 0;
    }
  }

  & .sectionFooter {
    margin: 0;
    padding: 0;
  }

  & .footerActionable {
    color: var(--color-primary-standard);
    cursor: pointer;
    font-weight: var(--font-weight-bold);
  }
}

.formSection {
  width: 320px;

  & .fieldGroup {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    margin-top: 24px;
  }

  & .fieldLabel {
    @mixin contentNormal bold;

    color: var(--color-maastricht-blue);
    margin-bottom: 8px;
  }

  & .feedback {
    &.referenceFeedback {
      justify-content: flex-end;
    }
  }

  & .status {
    color: var(--color-ultramarine-blue);
    opacity: 0;
    position: absolute;
    right: 10px;
    transition: opacity var(--animation-speed-fast) linear;

    &.show {
      opacity: 1;
      transition: opacity var(--animation-speed-fast) linear var(--animation-delay-standard);
    }
  }

  & .amountField {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;

    & .converter {
      position: absolute;
      right: 34px;
      top: 10px;
    }

    & .input {
      padding-left: 10px;
      padding-right: 120px;
      width: 100%;
    }
  }

  & .referenceField {
    display: flex;
    position: relative;
    width: 100%;

    & .byteCounter {
      bottom: 6px;
      opacity: 0;
      position: absolute;
      right: 10px;
      transition: opacity var(--animation-speed-fast) linear;
    }

    & .status {
      bottom: 10px;
      right: 12px;
    }

    & .textarea {
      padding-right: 30px;
      width: 100%;

      &:focus {
        & + .byteCounter {
          opacity: 1;
        }

        & ~ .status {
          opacity: 0;
        }
      }
    }
  }

  & .input,
  & .textarea {
    @mixin contentNormal;

    height: 36px;
  }

  & .textarea {
    resize: none;
    overflow: hidden;
    padding: 8px 10px;
  }

  & .sharingLink {
    background-color: var(--color-request-extarea);
  }

  & .sectionFooter {
    margin-top: 20px;

    & button {
      width: 100%;
    }
  }
}

.qrSection {
  width: 300px;
  display: block;
  margin-left: 40px;

  &.hide {
    display: none;
  }

  & .qrCodeContainer {
    align-items: center;
    border: 1px solid var(--color-platinum);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    margin: 24px 0 0;
    width: 100%;
    padding: 33px 0;

    & canvas {
      box-shadow: 0 0 1px 0 var(--color-strong-white);
    }
  }
}

.copyIcon {
  display: none;
}

.feedback {
  @mixin contentNormal;

  display: flex;
  box-sizing: border-box;
  color: var(--color-slate-gray);
  justify-content: flex-end;
  padding: 8px 0 0;
  width: 100%;
  position: absolute;
  bottom: -25px;
  right: 0;
  opacity: 0;

  &.error {
    color: var(--color-burnt-sienna);
  }
}

.feedback:not(:empty) {
  opacity: 1;
  transition: opacity var(--animation-speed-fast) linear var(--animation-delay-standard);
}
